<template>
  <el-container>
    <el-header>商品管理</el-header>
    <el-footer style="display: flex">
      <div
        v-for="(v, i) in arr"
        :key="i"
        style="margin: 0 20px"
        @click="dian(v.type)"
      >
        {{ v.name }}({{ v.count }})
      </div>
    </el-footer>
    <el-main>
      <el-header style="display: flex">
        商品分类：
        <el-select v-model="value" clearable placeholder="请选择">
          <el-option
            v-for="item in brr"
            :key="item.id"
            :label="item.html + item.cate_name"
            :value="item.id"
          >
          </el-option>
        </el-select>
        商品管理：
        <div style="width: 180px">
          <el-input value="" placeholder="请输入内容"></el-input>
        </div>
      </el-header>

      <el-footer>
        <el-button type="primary" @click="jump">
          <i class="el-icon-plus"></i>添加商品
        </el-button>
        <el-button type="success">复制淘宝，天猫，拼多多，京东，苏宁</el-button>
        <el-button> <i class="el-icon-upload"></i>导出 </el-button>
      </el-footer>

      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="商品分类">
                <span>{{ props.row.cate_name }}</span>
              </el-form-item>
              <el-form-item label="市场价格">
                <span>{{ props.row.ot_price }}</span>
              </el-form-item>
              <el-form-item label="成本价">
                <span>{{ props.row.cost }}</span>
              </el-form-item>
              <el-form-item label="收藏">
                <span>{{ props.row.collect }}</span>
              </el-form-item>
              <el-form-item label="虚拟销量">
                <span>{{ props.row.ficti }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column label="商品ID" prop="id" min-width="120">
        </el-table-column>
        <el-table-column label="商品图" prop="name" min-width="120">
          <template slot-scope="scope">
            <img :src="scope.row.image" alt="" />
          </template>
        </el-table-column>
        <el-table-column label="商品名称" prop="store_name" min-width="120">
        </el-table-column>
        <el-table-column label="商品售价" prop="price" min-width="120" >
        </el-table-column>
        <el-table-column label="销量" prop="sales" min-width="120" sortable >
        </el-table-column>
        <el-table-column label="库存" prop="stock" min-width="120">
        </el-table-column>
        <el-table-column label="排序" prop="sort" min-width="120">
        </el-table-column>
        <el-table-column label="状态" prop="is_show" min-width="120">
          <template slot-scope="scope">
            <div class="switchs">
<p v-if="scope.row.is_show == 1">显示</p>
            <p v-else-if="scope.row.is_show == 0">隐藏</p>
            <el-switch
              v-model="scope.row.is_show"
              :active-value="1"
              :inactive_value="0"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="gai(scope.row)"
              :width="120"
            >
            </el-switch>
            </div>
            
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="mini"
              @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              type="text"
              size="mini"
              @click="handleEdit(scope.$index, scope.row)"
              >查看评论</el-button
            >
            <el-button
              size="mini"
              type="text"
              @click="handleDelete(scope.row)"
              >移到回收站</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        background
        layout="prev, pager, next"
        :page="page"
        :page-size="pagesize"
        :total="total"
        :current-page="pagew"
        @current-change="pages"
      >
      </el-pagination>
    </el-main>
  </el-container>
</template>

<script>
import { list, fen, shop, cut,tubedel } from "../api/index";
export default {
  data() {
    return {
      tableData: [
      ],

      tableData: [],
      arr: [],
      brr: [],
      value: "",
      total: 0,
      page: 1,
      pagesize: 10,
      pagew: 1,
    };
  },
  created() {
    list().then((res) => {
      this.arr = res.data.data.list;
    });
    fen().then((res) => {
      //console.log(res.data.data);
      this.brr = res.data.data;
    });

    

    shop({ page: 1, limit: this.pagesize, type: 1, excel: 0 }).then((res) => {
      console.log(res.data);
      this.tableData = res.data.data.list;
      this.total = res.data.data.count;
    });
  },
  methods: {
    handleDelete(val){

      console.log(val);
      tubedel(val.id).then(res=>{
        console.log(res.data);
        if(res.data.status==200){
          shop({ page: 1, limit: 15, type: 1, excel: 0 }).then((res) => {
            this.tableData = res.data.data.list;
            this.total = res.data.data.count;
            this.pagew = 1;
          });
          list().then((res) => {
            this.arr = res.data.data.list;
          });
        }
      })
    },
    jump(){
      this.$router.push("/TubeAdd")
    },
    pages(val) {
      console.log(val);
      shop({ page: val, limit: 15, type: 1, excel: 0 }).then((res) => {
        console.log(res.data);
        this.tableData = res.data.data.list;
        this.total = res.data.data.count;
        this.pagew = val;
      });
    },
    dian(val) {
      console.log(val);
      shop({ page: 1, limit: 15, type: val, excel: 0 }).then((res) => {
        console.log(res.data);
        this.tableData = res.data.data.list;
        this.total = res.data.data.count;
        this.pagew = 1;
      });
    },
    gai(val) {
      if (val.is_show) {
        val.is_show = 1;
      } else {
        val.is_show = 0;
      }
      console.log(val.id, val.is_show);
      cut({ id: val.id, is_show: val.is_show }).then((res) => {
        console.log(res.data);
        if (res.data.status == 200) {
          shop({ page: 1, limit: 15, type: 1, excel: 0 }).then((res) => {
            this.tableData = res.data.data.list;
            this.total = res.data.data.count;
            this.pagew = 1;
          });
          list().then((res) => {
            this.arr = res.data.data.list;
          });
        }
      });
    },
  },
}
</script>

<style lang='scss' scoped>
.switchs{
  position: relative;
}
.switchs p{
  position: absolute;
  left: 40px;
  z-index: 111;
}
img {
  width: 36px;
  height: 36px;
  display: block;
}
.el-header,
.el-footer {
  background-color: white;
  color: #333;
  line-height: 60px;
}

.el-main {
  background-color: #b3c0d1;
  color: #333;
  //   line-height: 160px;
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
  display: flex;
}
.el-form-item__label {
  width: 300px;
}
</style>